<template>
    <div class="content" :data-font="$i18n.locale">
        <div class="form" style="margin-bottom:0.64rem">
            <form-title :title="$t('userInfo.basicInformation')"></form-title>
            <div class="jbxx" style="margin-top:0.64rem">
                <page-input :title="$t('userInfo.name')" :history="saveHistoryList.username"
                    @message="(e) => userInfoParams.name = e" :placeholder="$t('userInfo.enterName')"></page-input>
                <page-input :title="$t('userInfo.age')" :history="saveHistoryList.age"
                    @message="(e) => userInfoParams.age = e" :placeholder="$t('userInfo.enterYourAge')"></page-input>
                <select-input :title="$t('userInfo.gender')" width="max-content" :typeList="genderList"
                    :history="saveHistoryList.gender" @message="(e) => userInfoParams.gender = e"
                    :placeholder="$t('userInfo.choose')"></select-input>
            </div>
            <div style="margin-top:0.64rem">
                <textarea-input :max="1000" :title="$t('userInfo.otherInfo')"
                    :placeholder="$t('userInfo.otherInfoPlaceholder')" @message="(e) => userInfoParams.remark = e"
                    :history="saveHistoryList.remark"></textarea-input>
            </div>
            <div style="margin-top:0.64rem">
                <input-title :title="$t('userInfo.resumeInEnglishAndChinese')"></input-title>
                <div class="uploads">
                    <div style="margin-right:5.55rem;width: 11.23rem;">
                        <file-load :placeholder="$t('userInfo.zh')" :max="10" accept=".pdf"
                            @message="(e) => userInfoParams.rpcResume = e" :history="saveHistoryList.rpcResume"></file-load>
                    </div>
                    <div style="width:11.23rem">
                        <file-load :placeholder="$t('userInfo.en')" :max="10" accept=".pdf"
                            @message="(e) => userInfoParams.engResume = e" :history="saveHistoryList.engResume"></file-load>
                    </div>
                </div>
            </div>
            <div class="save-btn">
                <el-button class="save" @click="saveUserInfo" :data-font="$i18n.locale">{{
                    $t('userInfo.save')
                }}</el-button>
            </div>
        </div>

        <div class="form">
            <form-title :title="$t('userInfo.accountSecurity')"></form-title>
            <div class="bind-content">
                <div style="width:33.3%;" class="bind-item" v-show="$i18n.locale == 'zh'">
                    <my-bind :placeholder="$t('userInfo.unbound')" :history="saveHistoryList.mobilePhone"
                        :value="$t('userInfo.bind')" :valueActive="$t('userInfo.revise')" title="手机"
                        @btn="bdPhoneShow = true" @btnActive="updatePhoneShow = true"></my-bind>
                </div>
                <div style="width:33.3%;" class="bind-item">
                    <my-bind :placeholder="$t('userInfo.unbound')" :history="myEmail(saveHistoryList.email)"
                        :value="$t('userInfo.bind')" :valueActive="$t('userInfo.revise')" :title="$t('userInfo.email')"
                        @btn="bdEmailShow = true" @btnActive="updateEmailShow = true">
                    </my-bind>
                </div>
                <div style="width:33.3%;" class="bind-item">
                    <my-bind :placeholder="$t('userInfo.unSet')" :history="saveHistoryList.pwd ? $t('userInfo.set') : ''"
                        :value="$t('userInfo.setUp')" :valueActive="$t('userInfo.revise')" :title="$t('userInfo.password')"
                        @btn="bdPwdShow = true" @btnActive="updatePwdShow = true"></my-bind>
                </div>
                <div style="width:33.3%" class="bind-item" v-show="$i18n.locale == 'zh'">
                    <my-bind :placeholder="$t('userInfo.unbound')" :history="saveHistoryList.wxUnionId"
                        :value="$t('userInfo.bind')" :valueActive="$t('userInfo.unbind')" title="微信"
                        @click="wx(saveHistoryList.wxUnionId)"></my-bind>
                </div>
                <div style="width:33.3%" class="bind-item" v-show="$i18n.locale == 'zh'">
                    <my-bind :placeholder="$t('userInfo.unbound')" :history="saveHistoryList.qqOpenId"
                        :value="$t('userInfo.bind')" :valueActive="$t('userInfo.unbind')" title="QQ"
                        @click="qq(saveHistoryList.qqOpenId)"></my-bind>
                </div>
            </div>
        </div>

        <!-- 绑定手机 -->
        <el-dialog class="my-dialog" v-model="bdPhoneShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.bindPhone') }}</p>
            </template>
            <el-form ref="bdPhone" :model="bdPhoneParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.phone')" prop="phone">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterPhone')" v-model="bdPhoneParams.phone"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.code')" prop="code">
                    <my-code :placeholder="$t('message.enterCode')" :value="bdPhoneParams.phone"
                        @message="(e) => bdPhoneParams.code = e" @getRule="getPhoneRule"></my-code>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="bdPhoneShow = false">{{ $t('message.cancel') }}</el-button>
                        <el-button class="ok">{{ $t('message.bind') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改手机 -->
        <el-dialog class="my-dialog" v-model="updatePhoneShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.updatePhone') }}</p>
            </template>
            <el-form ref="updatePhone" :model="updatePhoneParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.oldPhone')" prop="phone">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterOldPhone')" v-model="updatePhoneParams.phone"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.newPhone')" prop="newPhone">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterNewPhone')"
                            v-model="updatePhoneParams.newPhone"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.code')" prop="code">
                    <my-code :placeholder="$t('message.enterCode')" :value="updatePhoneParams.newPhone"
                        @message="(e) => updatePhoneParams.code = e" @getRule="updatePhoneRule"></my-code>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="updatePhoneShow = false">{{
                            $t('message.cancel')
                        }}</el-button>
                        <el-button class="ok" @click="updatePhone">{{ $t('message.change') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 绑定邮箱 -->
        <el-dialog class="my-dialog" v-model="bdEmailShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.bindEmail') }}</p>
            </template>
            <el-form ref="bdEmail" :model="bdEmailParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.email')" prop="email">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterEmail')" v-model="bdEmailParams.email"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.code')" prop="code">
                    <my-code :placeholder="$t('message.enterCode')" type="email" :value="bdEmailParams.email"
                        @message="(e) => bdEmailParams.code = e" @getRule="bdEmailRule"></my-code>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="bdEmailShow = false">{{ $t('message.cancel') }}</el-button>
                        <el-button class="ok" @click="bdEmail">{{ $t('message.bind') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改邮箱 -->
        <el-dialog class="my-dialog" v-model="updateEmailShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.updateEmail') }}</p>
            </template>
            <el-form ref="updateEmail" :model="updateEmailParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.oldEmail')" prop="email">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterOldEmail')" v-model="updateEmailParams.email"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.newEmail')" prop="newEmail">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterNewEmail')"
                            v-model="updateEmailParams.newEmail"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.code')" prop="code">
                    <my-code :placeholder="$t('message.enterCode')" type="email" :value="updateEmailParams.newEmail"
                        @message="(e) => updateEmailParams.code = e" @getRule="updateEmailRule"></my-code>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="updateEmailShow = false">{{
                            $t('message.cancel')
                        }}</el-button>
                        <el-button class="ok" @click="updateEmail">{{ $t('message.change') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 设置密码 -->
        <el-dialog class="my-dialog" v-model="bdPwdShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.setPassword') }}</p>
            </template>
            <el-form ref="bdPwd" :model="bdPwdParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.password')" prop="password">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterPassword')" v-model="bdPwdParams.password"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.again')" prop="password1">
                    <el-input :placeholder="$t('message.enterPassword')" v-model="bdPwdParams.password1"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="bdPwdShow = false">{{ $t('message.cancel') }}</el-button>
                        <el-button class="ok" @click="bdPwd">{{ $t('message.ok') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改密码 -->
        <el-dialog class="my-dialog" v-model="updatePwdShow" width="18.77rem" align-center destroy-on-close>
            <template #header>
                <p class="dialog-title">{{ $t('message.changePassword') }}</p>
            </template>
            <el-form ref="updatePwd" :model="updatePwdParams" :rules="rules" hide-required-asterisk label-width="auto"
                label-position="left">
                <el-form-item :label="$t('message.oldPassword')" prop="password">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterPassword')" v-model="updatePwdParams.password"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.newPassword')" prop="newPassWord">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterPassword')"
                            v-model="updatePwdParams.newPassWord"></el-input>
                    </div>
                </el-form-item>
                <el-form-item :label="$t('message.again')" prop="newPassWord1">
                    <div class="my-input">
                        <el-input :placeholder="$t('message.enterPassword')"
                            v-model="updatePwdParams.newPassWord1"></el-input>
                    </div>
                </el-form-item>
                <el-form-item class="btn">
                    <div class="dialog-btn">
                        <el-button class="cancel" @click="updatePwdShow = false">{{ $t('message.cancel') }}</el-button>
                        <el-button class="ok" @click="updatePwds">{{ $t('message.ok') }}</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import formTitle from '../../components/form-title'
import pageInput from '../../components/page-input';
import selectInput from '../../components/my-select';
import textareaInput from '../../components/textarea-input';
import fileLoad from '../../components/file-load';
import inputTitle from '../../components/input-title';
import myBind from '../../components/my-bind';
import myCode from '../../components/my-code';
import { saveUserInfos, userInfo, bind, wxUnbind } from '@/request/api'
import { reactive, toRefs } from 'vue'
import Confirm from '@/components/message/confirm';
const { CONTEST_URL } = require("@/utils/URL");
import axios from 'axios'
export default {
    name: 'myInfo',
    components: {
        pageInput,
        selectInput,
        textareaInput,
        fileLoad,
        inputTitle,
        myBind,
        formTitle,
        myCode
    },
    setup() {
        let data = reactive({
            CONTEST_URL,
            saveHistoryList: {},
            bdPhoneShow: false,
            updatePhoneShow: false,
            bdEmailShow: false,
            updateEmailShow: false,
            bdPwdShow: false,
            updatePwdShow: false,
            userInfoParams: {
                name: '',
                age: '',
                gender: '',
                remark: '',
                engResume: '',
                rpcResume: ''
            },

            bdPhoneParams: {
                phone: '',
                code: ''
            },
            updatePhoneParams: {
                accountType: 1,
                opera: 2,
                newPhone: '',
                phone: '',
                code: ''
            },

            bdEmailParams: {
                accountType: 2,
                opera: 1,
                email: '',
                code: ''
            },
            updateEmailParams: {
                accountType: 2,
                opera: 2,
                email: '',
                newEmail: '',
                code: ''
            },
            bdPwdParams: {
                accountType: 3,
                opera: 1,
                password: '',
                password1: '',
            },

            updatePwdParams: {
                accountType: 3,
                opera: 2,
                password: '',
                newPassWord: '',
                newPassWord1: ''
            },
            rules: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        message: '手机号格式不正确',
                        pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/,
                        trigger: ['blur', 'change']
                    }
                ],
                newPhone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        message: '手机号格式不正确',
                        pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                        trigger: ['blur', 'change']
                    }
                ],
                oldPhone: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    // {
                    //     message: '手机号格式不正确',
                    //     pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                    //     trigger: ['blur', 'change']
                    // }
                ],

                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur',
                    }

                    // { validator: this.codeAge, trigger: 'blur' }
                ],
                email: [
                    {
                        required: true,
                        message: '请输入邮箱地址',
                        trigger: 'blur',
                    },
                    {
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: ['blur', 'change']
                    }
                ],
                newEmail: [
                    {
                        required: true,
                        message: '请输入邮箱地址',
                        trigger: 'blur',
                    },
                    {
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: ['blur', 'change']
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 12,
                        message: '6-12个字符，需含大小写字母、数字，不允许有空格和中文',
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(^[a-zA-Z0-9_]{0,}$).*$/,
                        trigger: ['blur', 'change'],
                    }
                ],
                password1: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 12,
                        message: '6-12个字符，需含大小写字母、数字，不允许有空格和中文',
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(^[a-zA-Z0-9_]{0,}$).*$/,
                        trigger: ['blur', 'change'],
                    }
                ],
                newPassWord1: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 12,
                        message: '6-12个字符，需含大小写字母、数字，不允许有空格和中文',
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(^[a-zA-Z0-9_]{0,}$).*$/,
                        trigger: ['blur', 'change'],
                    }
                ],
                newPassWord: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        type: 'string',
                        min: 6,
                        max: 12,
                        message: '6-12个字符，需含大小写字母、数字，不允许有空格和中文',
                        pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(^[a-zA-Z0-9_]{0,}$).*$/,
                        trigger: ['blur', 'change'],
                    }
                ]
            }
        })
        return {
            ...toRefs(data)
        };
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        codeAge(rule, value, callback) {
            if (!value) {
                return callback(new Error('请输入验证码'))
            } else {
                callback()
            }

        },
        //发验证码先校验手机号
        getPhoneRule() {
            this.$refs.bdPhone.validateField('phone', (res) => {
                console.log(res);
            })
        },
        updatePhoneRule() {
            this.$refs.updatePhone.validateField('phone', (res) => {
                console.log(res);
            })
        },

        bdEmailRule() {
            this.$refs.bdEmail.validateField('email', (res) => {
                console.log(res);
            })
        },
        updateEmailRule() {
            this.$refs.updateEmail.validateField('email', (res) => {
                console.log(res);
            })
        },
        bdPwdRule() {
            this.$refs.bdPwd.validateField('password', (res) => {
                console.log(res);
            })
        },
        updatePwdRule() {
            this.$refs.updatePwd.validateField('password', (res) => {
                console.log(res);
            })
        },
        // 获取用户信息
        getUserInfo() {
            userInfo().then(res => {
                if (res.data.resultCode == '200') {
                    this.saveHistoryList = res.data.data;
                }
            })
        },
        // 保存个人信息
        saveUserInfo() {

            if (this.$i18n.locale === 'zh') {
                Confirm({ title: '保存信息', message: '确定要保存更改吗？', left: '取消', right: '确定' })
                    .then(() => {
                        saveUserInfos(this.userInfoParams).then(res => {
                            if (res.data.resultCode == '200') {

                                this.$toast('保存成功', 2000, 'success');

                                this.getUserInfo();
                            }
                        })
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            } else {
                Confirm({ title: 'Save', message: 'Are you sure you want to save your changes?', left: 'Cancel', right: 'Ok' })
                    .then(() => {
                        saveUserInfos(this.userInfoParams).then(res => {
                            if (res.data.resultCode == '200') {
                                this.$toast('Success', 2000, 'success');
                                this.getUserInfo();
                            }
                        })
                    })
                    .then((ret) => {

                    })
                    .catch((err) => {
                        // 点击取消按钮触发
                        if (err === 'cancel') return
                    })
            }
        },

        // 修改手机号
        updatePhone() {
            this.$refs.updatePhone.validate((res) => {
                if (res) {
                    bind(this.updatePhoneParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('修改成功', 2000, 'success');
                        }
                        this.getUserInfo();
                        this.updatePhoneShow = false;
                    }).catch(err => {
                        this.updatePhoneShow = false;
                    })
                }
            })
        },

        // 绑定手机号
        bdPhone() {
            this.$refs.bdPhone.validate((res) => {
                if (res) {
                    bind(this.bdPhoneParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('绑定成功', 2000, 'success');

                        }
                        this.getUserInfo();
                        this.bdPhoneShow = false;
                    }).catch(err => {
                        this.bdPhoneShow = false;
                    })
                }
            })
        },

        // 绑定邮箱
        bdEmail() {
            this.$refs.bdEmail.validate((res) => {
                if (res) {
                    bind(this.bdEmailParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('绑定成功', 2000, 'success');

                        }
                        this.getUserInfo();
                        this.bdEmailShow = false;
                    }).catch(err => {
                        this.bdEmailShow = false;
                    })
                }
            })
        },

        // 修改邮箱
        updateEmail() {
            this.$refs.updateEmail.validate((res) => {
                if (res) {
                    bind(this.updateEmailParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('修改成功', 2000, 'success');

                        }
                        this.getUserInfo();
                        this.updateEmailShow = false;
                    }).catch(err => {
                        this.updateEmailShow = false;
                    })
                }
            })
        },
        // 设置密码
        bdPwd() {
            this.$refs.bdPwd.validate((res) => {
                if (res) {
                    bind(this.bdPwdParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('设置成功', 2000, 'success');

                        }
                        this.getUserInfo();
                        this.bdPwdShow = false;
                    }).catch(err => {
                        this.bdPwdShow = false;
                    })
                }
            })
        },
        updatePwds() {
            this.$refs.updatePwd.validate((res) => {
                if (res) {
                    bind(this.updatePwdParams).then(res => {
                        if (res.data.resultCode == '200') {

                            this.$toast('修改成功', 2000, 'success');

                        }
                        this.getUserInfo();
                        this.updatePwdShow = false;
                    }).catch(err => {
                        this.updatePwdShow = false;
                    })
                }
            })
        },
        wx(e) {
            if (e) {
                if (this.$i18n.locale === 'zh') {
                    Confirm({ title: '解除绑定', message: '确定要解除绑定吗？', left: '取消', right: '解除' })
                        .then(() => {
                            wxUnbind().then(res => {
                                if (res.data.resultCode == '200') {
                                    this.$toast('解绑成功', 2000, 'success');
                                    this.getUserInfo();
                                }
                            })
                        })
                        .then((ret) => {

                        })
                        .catch((err) => {
                            // 点击取消按钮触发
                            if (err === 'cancel') return
                        })
                } else {
                    Confirm({ title: 'Delete Item', message: 'Are you sure you want to delete this registration?', left: 'Cancel', right: 'Delete' })
                        .then(() => {
                            wxUnbind().then(res => {
                                if (res.data.resultCode == '200') {

                                    this.$toast('Success', 2000, 'success');
                                    this.getUserInfo();
                                }
                            })
                        })
                        .then((ret) => {

                        })
                        .catch((err) => {
                            // 点击取消按钮触发
                            if (err === 'cancel') return
                        })
                }
            } else {
                let header = {}
                if (this.saveHistoryList.mobilePhone) {
                    header = {
                        phone: this.saveHistoryList.mobilePhone
                    }
                } else if (!this.saveHistoryList.mobilePhone && this.saveHistoryList.email) {
                    header = {
                        email: this.saveHistoryList.email
                    }
                }
                axios({
                    url: CONTEST_URL + '/api/wx/get/code',
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',//设置请求头请求格式为JSON
                        'token': this.$store.state.token,
                        ...header
                    },
                    params: ''
                }).then(res => {
                    this.$store.commit('setRoute', this.$route.path)
                    window.location.href = res.data.data;
                })
            }
        },
        qq(e) {

            this.$toast('暂未开通', 2000, 'normal');
        }
    },

    computed: {
        mobilePhone() {
            return function (v) {
                let num = ''
                if (v) {
                    var tel = v;
                    tel = "" + tel;
                    num = tel.substr(0, 2) + "*******" + tel.substr(9)
                }
                return num
            }
        },
        myEmail() {
            return function (v) {
                let num = '';
                if (v) {
                    let l = v.split('@')[0];
                    num = l.substr(0, 1) + "*****" + l.substr(l.length - 1) + '@' + v.split('@')[1]
                }
                return num;
            }
        },
        genderList() {
            if (this.$i18n.locale == 'zh') {
                return [
                    {
                        value: '2',
                        name: '男'
                    },
                    {
                        value: '1',
                        name: '女'
                    },
                ]
            } else {
                return [
                    {
                        value: '2',
                        name: 'Male'
                    },
                    {
                        value: '1',
                        name: 'Female'
                    },
                ]
            }
        }
    }

}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    padding-top: 0.27rem;
    padding-bottom: 3.2rem;

    .form {
        width: 34.99rem;
        padding: 0.64rem 1.49rem;
        background: rgba(253, 253, 254, 0.25);
        border: 0.05rem solid #FFFFFF;
        backdrop-filter: blur(10px);
        margin: 0 auto;
    }

    .el-form {
        label {
            color: red;
        }
    }

    .jbxx {
        width: 100%;
        display: flex;
        flex: 1;
        position: relative;
    }

    .jbxx::after {
        content: "";
        position: absolute;
        top: 98%;
        left: 0;
        width: 100%;
        background-color: #C5C5CA;
        height: 0.03rem;
    }

    .uploads {
        display: flex;
        align-items: center;
    }

    .save-btn {
        display: flex;
        align-items: center;
        margin-top: 0.59rem;
        justify-content: center;

        .save {
            width: 12.67rem;
            height: 1.07rem;
            background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
            border-radius: 0.11rem;
            backdrop-filter: blur(10px);
        }

        .save :deep(span) {
            font-size: 0.48rem;
            color: #FFFFFF;
            line-height: 0.69rem;
        }

        .save[data-font='zh'] :deep(span) {
            font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
        }

        .save[data-font='en'] :deep(span) {
            font-family: 'PingFangSC-Light', 'PingFang SC';
            font-weight: 300;
        }
    }

    .bind-content {
        display: flex;
        flex-wrap: wrap;
    }

    .bind-item {
        margin-top: 0.64rem;
    }

    :deep(.my-dialog) {
        header {
            width: 100%;
            padding: 0.37rem 0.37rem;
        }

        .el-dialog__body {
            padding: 0.06rem 0.37rem 0.37rem;
        }

        .el-dialog__headerbtn {
            background-color: red;
            width: 0.85rem;
            height: 0.85rem;
            right: 0.37rem;
            top: 0.37rem;
            background: url('@/assets/img/close.png') no-repeat;
            background-size: contain;

            i {
                display: none;
            }
        }
    }

    .my-input {
        flex: 1;
        height: 1.6rem;
        background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
        border-radius: 0.21rem;
        border: 0.03rem solid #C5C5CA;
        backdrop-filter: blur(10px);
        overflow: hidden;

        .el-input {
            height: 100%;
            flex: 1;
            outline: none;
            border: none;
            box-shadow: none;
        }

        .el-input:focus {
            border: none !important;
        }

        .el-input :deep(.is-focus) {
            box-shadow: none;
        }

        .el-input :deep(.el-input__wrapper) {
            box-shadow: none;
        }
    }

    .btn {
        margin-bottom: 0;
    }

    .dialog-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .cancel {
            width: 2.13rem;
            height: 1.07rem;
            background: linear-gradient(315deg, #FAFBFF 0%, #FCF8FF 100%);
            border-radius: 0.11rem;
            border: 0.03rem solid #7709CC;
            backdrop-filter: blur(10px);
        }

        .cancel :deep(span) {
            font-size: 0.48rem;
            font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            color: #7709CC;
            line-height: 0.69rem;
        }

        .ok {
            width: 2.13rem;
            height: 1.07rem;
            background: linear-gradient(315deg, #2657FF 0%, #9F22FF 100%);
            border-radius: 0.11rem;
            backdrop-filter: blur(10px);
        }

        .ok :deep(span) {

            font-size: 0.48rem;
            font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            color: #FFFFFF;
            line-height: 0.69rem;
        }
    }

    :deep(.el-overlay-dialog) {
        background: rgba(197, 197, 202, 0.8);
        backdrop-filter: blur(10px);
    }
}

.content[data-font='zh'] {
    :deep(label) {
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #68656C;
        line-height: 0.85rem;
    }

    .el-dialog {
        .el-input :deep(.el-input__inner) {
            font-size: 0.53rem;
            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            line-height: 0.85rem;
        }

        .el-input :deep(.el-input__inner::placeholder) {
            font-size: 0.53rem;
            font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
            font-weight: normal;
            color: #C5C5CA;
            line-height: 0.85rem;
        }
    }

    .dialog-title {
        height: 0.85rem;
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #212121;
        line-height: 0.85rem;
    }
}

.content[data-font='en'] {
    :deep(label) {
        font-size: 0.48rem;
        font-family: 'Helvetica';
        color: #68656C;
        line-height: 0.75rem;
    }

    .dialog-title {
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-EEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #212121;
        line-height: 0.85rem;
    }

    .el-dialog {
        .el-input :deep(.el-input__inner) {
            font-size: 0.48rem;
            font-family: 'PingFangSC-Regular', 'PingFang SC';
            font-weight: 400;
            line-height: 0.75rem;
        }

        .el-input :deep(.el-input__inner::placeholder) {
            font-size: 0.48rem;
            font-family: 'PingFangSC-Regular', 'PingFang SC';
            font-weight: 400;
            color: #C5C5CA;
            line-height: 0.75rem;
        }

    }
}
</style>